<template>
	<view class="content">
		<image class="bg-image" :src="data.mainImage" mode="widthFix"></image>
		<view class="name-content">
			<view>{{data.goodsName}}</view>
			<view class="price">￥0</view>
		</view>
		<view class="image-content">
			<image class="bg-image" :src="data.detailImages" mode="widthFix"></image>
		</view>
		<view class="btn-submit" @click="handleClick">
			立即办理
		</view>
		<view v-show="showPhoneModel">
			<view class="model-shadow" @click="handleHidemodel"></view>
			<view class="model-content">
				<view class="title">请填写您的联系电话</view>
				<view class="login-form-content">
					<view class="input-item flex align-center">
						<input v-model="loginForm.receiverPhoneNumber" class="input" type="number" placeholder="请输入号码"
							maxlength="11" />
					</view>
					<view class="action-btn">
						<button @click="handleSubmitPhone" class="submit-phone-btn round">确认提交</button>
					</view>
				</view>
			</view>
		</view>
		<view class="model-shadow bg-color" v-show="formModel">
			<view class="form-model">
				<view class="goods-name _p_12">已选择：<text>{{data.goodsName}}</text></view>
				<view class="gray-color _p_12">
					请实名登记信息
				</view>
				<view class="tabs _p_12">
					<view :class="tabActive == 1?'tab active':'tab'" @click="tabActive=1">
						身份证
					</view>
					<view :class="tabActive == 2?'tab active':'tab'" @click="tabActive = 2">
						永居证
					</view>
				</view>
				<view>
					<view class="uni-form-item uni-column _p_12 border-bttom">
						<view class="title"><text class="red">*</text>姓名</view>
						<input v-model="loginForm.receiver" class="uni-input" name="receiver" placeholder="请输入姓名" />
					</view>
					<view class="uni-form-item uni-column _p_12 border-bttom" v-if="tabActive == 2">
						<view class="title"><text class="red">*</text>永居证</view>
						<input v-model="loginForm.receiverLiveCard" class="uni-input" name="receiverLiveCard"
							placeholder="请输入永居证" />
					</view>
					<view class="uni-form-item uni-column _p_12 border-bttom" v-else>
						<view class="title"><text class="red">*</text>身份证</view>
						<input v-model="loginForm.receiverIdCard" class="uni-input" name="receiverIdCard"
							placeholder="请输入身份证" />
					</view>
				</view>
				<view class="_title">请填写联系信息</view>
				<view class="uni-form-item uni-column _p_12 border-bttom">
					<view class="title"><text class="red">*</text>联系方式</view>
					<input v-model="loginForm.receiverPhoneNumber" class="uni-input" name="receiverPhoneNumber"
						placeholder="请输入联系方式" />
				</view>
				<view class="uni-form-item uni-column _p_12 border-bttom">
					<view class="title">所在地区</view>
					<view>
						<!-- 	<input v-model="loginForm.receiverPhoneNumber"
							class="uni-input border-bttom input-padding padding-t-0" name="receiverPhoneNumber"
							placeholder="请选择地区" /> -->
						<picker @change="bindPickerChange" :value="index" :range="provList" range-key="areaName">
							<view class="uni-input border-bttom input-padding padding-t-0" v-if="index === ''">
								请选择
							</view>
							<view class="uni-input border-bttom input-padding padding-t-0" v-else>
								{{provList[index]&& provList[index].areaName}}
							</view>
						</picker>
						<picker @change="bindPickerChange1" :value="key" :range="countyList" range-key="areaName"
							id="myPicker">
							<view class="uni-input border-bttom input-padding padding-t-0" v-if="key === ''">
								市
							</view>
							<view class="uni-input border-bttom input-padding padding-t-0" v-if="key !== ''">
								{{countyList[key]&& countyList[key].areaName}}
							</view>
						</picker>
						<picker @change="bindPickerChange2" :value="num" :range="cityList" range-key="areaName"
							id="myPicker2">
							<view class="uni-input border-bttom input-padding padding-t-0" v-if="num === ''">
								市
							</view>
							<view class="uni-input border-bttom input-padding padding-t-0" v-if="num !== ''">
								{{cityList[num]&& cityList[num].areaName}}
							</view>
						</picker>
						<view class="uni-column">
							<input v-model="loginForm.receiverAddress" class="uni-input input-padding padding-b-0"
								name="receiverAddress" placeholder="请输入详细地址" />
						</view>

					</view>
				</view>
				<view class="uni-form-item uni-column _p_12 border-bttom">
					<view class="title">电子发票</view>
					<input v-model="loginForm.receiveremail" class="uni-input" name="receiveremail"
						placeholder="接收电子发票的电子邮箱" />
				</view>
				<view class="uni-form-item uni-column _p_12">
					<view class="title">备注信息</view>
					<input v-model="loginForm.remark" class="uni-input" name="remark"
						placeholder="没有可不填" />
				</view>
			</view>
			<view class="agree-box">
				<radio style="transform:scale(0.7)" color="#ee0a24" :checked="checked" @click="checked = !checked">
				</radio>
				我已阅读并同意
				<text><text @click="goto('/pages/agreement/01')">《中国电信用户入网协议(2024版）》</text><text
						@click="goto('/pages/agreement/02')">《中国电信个人信息保护政策》</text>)</text>
			</view>
			<view :class="checked?'submit':'submit disabled'" @click="formSubmit">
				确认订单
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getInfo,
		save,
		getArea,
		getNextArea
	} from '@/api/H5/index.js'
	export default {
		data() {
			return {
				data: {},
				loginForm: {
					orderType: 3
				},
				showPhoneModel: false,
				tabActive: 1,
				checked: false,
				formModel: false,
				provList: [],
				countyList: [],
				cityList: [],
				index: '',
				key: '',
				num: '',
				id: ''
			}
		},
		onLoad: function(options) {
			if (!options.id) return;
			this.id = options.id;
			getInfo(options.id).then(res => {
				this.data = res.data
			})
			this.handleGetArea(1);
		},
		methods: {
			bindPickerChange2(e) {
				this.num = e.detail.value;
				const data = this.cityList[e.detail.value];
				this.loginForm.receiverCityCode = data.id;
				this.loginForm.receiverCityName = data.areaName;

			},
			bindPickerChange1(e) {
				this.key = e.detail.value;
				const data = this.countyList[e.detail.value];
				this.loginForm.receiverCountyCode = data.id;
				this.loginForm.receiverCountyName = data.areaName;
				this.handleGetNextArea(data.id, 'cityList', 'myPicker2');
			},
			bindPickerChange(e) {
				this.index = e.detail.value;
				const data = this.provList[e.detail.value];
				this.loginForm.receiverProvinceCode = data.id;
				this.loginForm.receiverProvinceName = data.areaName;
				this.handleGetNextArea(data.id, 'countyList', 'myPicker');
			},
			handleGetNextArea(level, name, id) {
				getNextArea(level).then(res => {
					this[name] = res;
					var pickerElement = document.getElementById(id);
					var event = new MouseEvent('click', {
						view: window,
						bubbles: true,
						cancelable: true
					});
					pickerElement.dispatchEvent(event);
				})
			},
			handleGetArea(level) {
				getArea(level).then(res => {
					this.provList = res

				}).catch(err => {})
			},
			handleClick() {
				this.showPhoneModel = true;
				uni.pageScrollTo({
					scrollTop:0,
					duration:0
				})
				document.body.style.overflow = 'hidden';
			},
			handleHidemodel(){
				this.showPhoneModel = false;
				document.body.style.overflow = '';				
			},
			handleSubmitPhone() {
				const {
					receiverPhoneNumber
				} = this.loginForm
				// 验证手机号
				const pattern = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
				if (!pattern.test(receiverPhoneNumber)) {
					this.$modal.msgError("请输入您正确的手机号")
				} else {
					this.formModel = true;
				}
			},
			goto(url) {
				uni.navigateTo({
					url,

				})
			},
			formSubmit() {
				var inquireData = {
					'receiver': '姓名必填！',
					'receiverIdCard': '身份证必填！',
					'receiverPhoneNumber': '手机号必填！',
				}
				for (var k in inquireData) {
					if (!this.loginForm[k]) {
						this.$modal.msgError(inquireData[k])
						return
					}
				}
				const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				if (!reg.test(this.loginForm.receiverIdCard)) {
					this.$modal.msgError("请输入正确的身份证号");
					return
				}
				this.loginForm.goods = [{
					goodsId: this.id
				}];
				save(this.loginForm).then(res => {
						const {
							orderId
						} = res.data;
						this.goto('/pages/common/success?num=' + orderId + '&name=' + this.data.goodsName)
					})
					.catch(err => {
						this.showPhoneModel = false;
						this.formModel = false;
						document.body.style.overflow = 'hidden';
					})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		font-size: 0;
		padding-bottom: 68px;

		.bg-image {
			width: 100%;
		}

		.name-content {
			background-color: #fff;
			width: 100%;
			padding: 24px;
			color: #1b1b1b;
			font-size: 14px;

			.price {
				color: #ff0000;
				font-size: 20px;
				margin-top: 12px;
			}
		}

		.btn-submit {
			background-image: linear-gradient(#ffb94d, #f18c0b);
			width: 90%;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			bottom: 12px;
			color: #fff;
			font-size: 18px;
			text-align: center;
			font-weight: 700;
			padding: 12px 0;
			border-radius: 50px;
		}

		.model-shadow {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.8);

			.form-model {
				background-color: #fff;
				width: 100%;
				font-size: 16px;
				padding-bottom: 48px;

				uni-picker {
					display: inline-block;
				}

				._title {
					padding: 24px 12px;
					color: #777777;
					background-color: #f6f8f7;
				}

				.uni-form-item {
					display: flex;

					.title {
						width: 100px;
					}
				}

				.goods-name {
					padding: 12px;
					color: #777;

					text {
						color: #f78700;
					}
				}

				.gray-color {
					color: #777;
				}

				.tabs {
					display: flex;
					text-align: center;

					.tab {
						flex: 1;
						color: #ee0a24;
						border: 1px solid #ee0a24;
						padding: 6px 0;

						&.active {
							background-color: #ee0a24;
							color: #fff;
						}
					}
				}
			}

			.agree-box {
				font-size: 14px;
				padding: 12px;
				color: #aaa;

				text {
					color: #f39700;
				}
			}
		}

		.model-content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: #fff;
			width: 80%;
			border-radius: 12px;
			padding: 24px;
			font-size: 18px;

			.title {
				text-align: center;
				font-weight: 700;
				margin-bottom: 24px;
			}

			.login-form-content {
				width: 60%;
				margin: 0 auto;
			}

			.submit-phone-btn {
				background-image: linear-gradient(#fdb647, #f28e0d);
				color: #fff;
				margin-top: 24px;
				width: 90%;
				border-radius: 12px;
			}
		}

		.submit {
			font-size: 18px;
			color: #fff;
			text-align: center;
			font-weight: 700;
			background-image: linear-gradient(#ffb94c, #f18d0d);
			width: 70%;
			margin: 24px auto;
			border-radius: 50px;
			padding: 12px 0;

			&.disabled {
				background: rgb(153, 153, 153);
			}
		}

	}

	._p_12 {
		padding: 12px;
	}

	.border-bttom {
		border-bottom: 1px solid #cdcdcd;
	}

	.red {
		color: #ee0a24;
	}

	.model-shadow.bg-color {
		background-color: #f6f8f7;
	}

	.input-padding {
		padding: 12px;
		box-sizing: content-box;
	}

	.padding-b-0 {
		padding-bottom: 0;
	}

	.padding-t-0 {
		padding-top: 0;
	}
	.modal-open {
	    overflow: hidden;
	}
</style>